<template>
    <div class="person">
      姓：<input type="text" v-model="firstName"> <br>
      名：<input type="text" v-model="lastName"> <br>
      <button @click="changeFullName">将全名改为li-si</button>
      <br>
      <!--计算属性使用的时候直接写名字，方法调用要加括号-->
      全名-计算属性：<span>{{ fullName }}</span> <br>
      全名-计算属性：<span>{{ fullName }}</span> <br>
      全名-计算属性：<span>{{ fullName }}</span> <br>
      全名-方法调用：<span>{{ fullName2() }}</span> <br>
      全名-方法调用：<span>{{ fullName2() }}</span> <br>
      全名-方法调用：<span>{{ fullName2() }}</span> <br>
    </div>
</template>

<script setup name="Person">
    import {compile, computed, reactive, ref} from "vue";

    let firstName = ref('zhang')
    let lastName = ref('san')

    function fullName2() {
      // return firstName.value + '-' + lastName.value;
      return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
    }

    /*let fullName = computed(() => {
      return firstName.value + '-' + lastName.value
    });*/

    let fullName = computed({
      get() {
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
      },
      set(val) {
        console.log(val);
        let [str1, str2] = val.split('-');
        firstName.value = str1;
        lastName.value = str2;
      }
    })

    function changeFullName() {
      fullName.value = 'li-si';
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>